<template>
  <div>
    <Home_head />
    <br /><br /><br />
    <div class="bolg_all">
      <br />
      <div style="border-bottom: #151414 solid 1px">
        <div style="display: block; width: 100%; margin: 20px">
          <span style="font-size: 26px">{{ blog_title }}</span>
        </div>
        <div class="Blog_userInfo">
          <img
            :src="User_Head"
            style="
              height: 25px;
              width: 25px;
              border-radius: 50%;
              position: absolute;
            "
          />
          <div style="display: inline; margin-left: 38px" >
            <span style="font-weight: 200">{{ userName }}</span>
          </div>
          <div style="display: inline; margin-left: 10px">
            <span style="font-weight: 200">分类：{{ sort }}</span>
          </div>
          <div class="end_time">
            <span style="font-weight: 200">最后修改时间:{{ end_time }}</span>
          </div>
        </div>
      </div>
      <br />
      <div v-highlight v-html="msg" style="margin: 20px;"></div>
      <div class="Like_view">
        <div style="display: block; width: 100%; margin: 20px">
          <img
            :src="User_Head"
            style="height: 25px; width: 25px; border-radius: 50%"
          />
          <div style="display: inline; margin-left: 10px">
            <span style="font-weight: 200">{{ userName }}</span>
          </div>
          <button class="attention" v-if="!isattention" @click="Attention()">关注</button>
          <button class="attention" v-if="isattention" @click="unAttention()">已关注</button>
          <div
            style="
              display: inline-flex;
              align-items: center;
              float: right;
              margin-right: 60px;
            "
          >
            <img
              src="../assets/newHeart2021Black.png"
              style="height: 20px; width: 20px; margin-right: 6px"
              @click="Like()"
              :disable="RepeatLike"
              v-if="dianzan"
            />
            <img
              src="../assets/dianzan.jpg"
              style="height: 20px; width: 20px; margin-right: 6px"
              @click="unLike()"
              :disable="RepeatLike"
              v-if="!dianzan"
            />
            <span style="margin-right: 15px">{{ blog_like }}</span>
            <img
              src="../assets/newCollectBlack.png"
              style="height: 20px; width: 20px; margin-right: 6px"
              @click="Collect()"
              :disable="RepeatCollect"
              v-if="shoucang"
            />
            <img
              src="../assets/shoucang.jpg"
              style="height: 20px; width: 20px; margin-right: 6px"
              @click="unCollect()"
              :disable="RepeatCollect"
              v-if="!shoucang"
            />
            <span style="margin-right: 15px">{{ blog_collect }}</span>
          </div>
        </div>
      </div>
      <div class="post_comment">
            <span style="margin-right: 65px; font-size: 23px;">发布评论</span>
            <input class="ipt_remark" v-model="parentContent">
            <button class="btn_remark" @click="parentRemark()"> 发布</button>
      </div>
      
      <Remark :remark="remark" :blogId="this.$route.query.blogId" v-if="remark.length>0"></Remark>
      <div v-if="remark.length==0" style="text-align: center; font-size: 6px;">没有更多评论</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Home_head from "@/components/Home_head.vue";
import Remark from "@/components/Remark.vue";
var token = localStorage.getItem("user_Token");
export default {
  components: {
    Home_head,
    Remark,
  },
  data() {
    return {
      msg: "",
      dianzan: true,
      shoucang: true,
      userName: "",
      User_Head: "",
      sort: "",
      end_time: "",
      blog_collect: 0,
      blog_like: 0,
      page_view: 0,
      blog_title: "",
      remark:[],
      parentContent:"",
      isattention:false,
      RepeatLike:false,
      RepeatCollect:false,
    };
  },
  created: function () {
    this.gethtml();
    this.blog_ifon();
    this.blogger_head();
    this.iscollect();
    this.getAllRemark();
    this.isLike();
    this.isAttention();
  },
  methods: {
    getAllRemark(){
      axios
        .post("/AllRemark", {
          blogId: this.$route.query.blogId-0,
        })
        .then((response) => {
          this.remark=response.data;
        });
    },
    gethtml() {
      axios
        .post("/getStrByName", {
          blogId: this.$route.query.blogId-0,
        })
        .then((response) => {
          this.msg = response.data;
        });
    },
    blog_ifon() {
      axios
        .post("/blog_ifon", {
          blogId: this.$route.query.blogId-0,
        })
        .then((response) => {
          this.blog_collect = response.data.blogCollect;
          this.blog_like = response.data.blogLike;
          this.sort = response.data.blogSortName;
          this.end_time = response.data.createTime;
          this.userName = response.data.userName;
          this.blog_title = response.data.blogTitle;
        });
    },
    blogger_head() {
      axios
        .post("/blogger_info", {
          blogId: this.$route.query.blogId-0,
        })
        .then((response) => {
          this.User_Head = response.data;
        });
    },
    Like() {
      if(localStorage.getItem("user_Token")==null){
        this.$message({
          message: '请先登录，登陆后才能点赞噢~',
          type: 'warning'
        });
      }
      else{
        axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{
            if(response.data.isExpire==true){
              if(this.RepeatLike==true){
                this.$message({
              message: '五秒之内请不要重复点赞或者取消点赞',
              type: 'warning'
              });
              }else{
                axios.post("/GiveLike", {
               blogId: this.$route.query.blogId-0,
               user_token : localStorage.getItem("user_Token"),})
               .then((response) => {
                    this.blog_like = response.data;
                    this.dianzan = false;
                    });
              }
            }else{
              this.$message({
              message: '登录token过期请重新登录',
              type: 'warning'
              });
            }
            },
          )
      }
      this.RepeatLke=true,

      setTimeout(()=>{
        this.RepeatLike=false
      },5000)
    },
    unLike() {
      if(this.RepeatLike==true){
              this.$message({
              message: '五秒之内请不要重复点赞或者取消点赞',
              type: 'warning'
              });
              }else{axios.post("/CancelLike", {blogId: this.$route.query.blogId-0,user_token : localStorage.getItem("user_Token"),})
                  .then((response) => {
                      this.blog_like = response.data;
                      this.dianzan = true;
                });}

      this.RepeatLke=true,

      setTimeout(()=>{
         this.RepeatLike=false
      },5000)          
    },
    isLike(){
      axios
        .post("/isLike", {
          blogId: this.$route.query.blogId-0,
          user_token : localStorage.getItem("user_Token"),
        })
        .then((response) => {
          this.dianzan=!JSON.parse(response.data);
        });
    },
    Collect() {
      if(localStorage.getItem("user_Token")==null){
        this.$message({
          message: '请先登录，登陆后才能收藏噢~',
          type: 'warning'
        });
      }
      else{
        axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{ 
            if(response.data.isExpire==true){
                axios.post("/AttentionBlog", {
              blogId: this.$route.query.blogId-0,
              userName: this.userName,
              user_token : localStorage.getItem("user_Token"),
              })
          .then((response) => {
              this.blog_collect=response.data.toString();
              this.shoucang = false;
          });
          }else{
              this.$message({
              message: '登录token过期请重新登录',
              type: 'warning'
              });
            }
            },
          )
      }

      this.RepeatCollect=true
    },
    unCollect() {
      if(this.RepeatCollect==true){
        this.$message({
                 message: '在五秒内请不要重复点击收藏',
                 type: 'warning'
                });
      }else{
        axios
        .post("/Unfollow", {
          blogId: this.$route.query.blogId-0,
          userName: this.userName,
          user_token : localStorage.getItem("user_Token"),
        })
        .then((response) => {
          this.blog_collect=response.data.toString();
          this.shoucang = true;
        });
      }

        this.RepeatCollect=true
      setTimeout(()=>{
        this.RepeatCollect=false
      },5000)
    },
    iscollect(){
      axios
        .post("/iscollect", {
          blogId: this.$route.query.blogId-0,
          user_token : localStorage.getItem("user_Token"),
        })
        .then((response) => {
          this.shoucang = !JSON.parse(response.data);
        });
    },
    parentRemark(){
      if(localStorage.getItem("user_Token")==null){
        this.$message({
          message: '请先登录，登陆后才能发布评论噢~',
          type: 'warning'
        });
      }
      else{
        axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{ 
            if(response.data.isExpire==true){
              axios.post("/parentRemark", {
                parentContent:this.parentContent,
                blogId:(this.$route.query.blogId-0),
                user_token : localStorage.getItem("user_Token"),
            }).then(response=>{
                this.remark=response.data
                });
          }else{
              this.$message({
              message: '登录token过期请重新登录',
              type: 'warning'
              });
            }
            },
          )
      }

    },
    Attention(){
      if(localStorage.getItem("user_Token")==null){
        this.$message({
          message: '请先登录，登陆后才能关注你喜欢的博主噢~',
          type: 'warning'
        });
      }
      else{
        axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")
        }).then(
            response =>{ 
            if(response.data.isExpire==true){
              axios.post("/UserAttention",
            {userName: this.$route.query.userName,
            userToken: token,
            }).then((response)=>{
                this.isattention=true;
            });
          }else{
              this.$message({
              message: '登录token过期请重新登录',
              type: 'warning'
              });
            }
            },
          )
      }
    },
    unAttention(){
      axios.post("/UserUnAttention",
            {userName: this.$route.query.userName,
            userToken: token,
            }).then((response)=>{
                this.isattention=false;
            })
    },
    isAttention(){
      axios.post("/isAttention",
            {userName: this.$route.query.userName,
            userToken: token,
            }).then((response)=>{
                this.isattention=JSON.parse(response.data);
            })
    },
  },
};
</script>

<style>
.Blog_userInfo{
  display: block; 
  width: 100%; 
  margin: 20px ;
  position: relative;
}
.Blog_userInfo .end_time{
  display: inline; 
  position: absolute; 
  right: 30px
}
.bolg_all {
  display: block;
  margin: 0 auto;
  background-color: #fff;
  width: 1100px;
  height: 100%;
  text-align: left;
  border-radius: 16px;
  padding-bottom: 30px;
}
.bolg_all span {
  font-family: "Helvetica Neue";
}
.Like_view {
  background-color: #fff;
  width: 1100px;
  height: 60px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-top: #151313 solid 1.5px;
  margin-top: 200px;
}
.post_comment{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 30px ;
}
.ipt_remark{
  width: 60%;
  height: 30px;
  border-radius: 6px;
}
.btn_remark{
  margin-left: 35px;
  width: 56px;
  height: 35px;
  background-color: #289deb;
  color:#fff;
  border: 0;
  border-radius: 5px;
}
.attention{
  width: 40px; 
  height: 20px;
  margin-left: 15px; 
  background-color: #fff; 
  border: 1.5px solid #bababa; 
  border-radius: 5px;
  font-size: 3px;
}
.attention:hover{
  background-color: #ededed;
}
</style>